<!--
 * @Date: 2023-09-05 13:56:58
 * @LastEditors: admin@54xavier.cn
 * @LastEditTime: 2024-04-05 13:04:55
 * @FilePath: \electron-hiprint\assets\set.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./element-ui/index.css" />
    <script src="./js/vue.min.js"></script>
    <script src="./element-ui/index.js"></script>
    <script src="./js/dayjs.min.js"></script>
    <script src="./js/lodash.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        user-select: none;
      }

      #app {
        padding: 12px 22px;
      }

      .el-form-item {
        margin-bottom: 8px;
      }

      .el-form--label-top .el-form-item__label {
        padding: 0;
      }

      .el-input-number,
      .el-select,
      .el-button {
        width: 100%;
      }

      /* 隐藏滚动条，但仍然可以滚动 */
      .hide-scrollbar {
        -ms-overflow-style: none; /* IE 和 Edge */
        scrollbar-width: none; /* Firefox */
      }

      /* 在内容高度足够时显示滚动条，否则隐藏 */
      .hide-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome, Safari 和 Opera */
      }
    </style>
    <title>设置</title>
  </head>

  <body class="hide-scrollbar">
    <div id="app">
      <el-form
        ref="formRef"
        :model="formData"
        label-position="top"
        :rules="rules"
      >
        <!-- 端口设置 -->
        <el-form-item label="端口设置" prop="port">
          <el-input-number
            v-model="formData.port"
            size="small"
            min="10000"
            max="65535"
            :controls="false"
            placeholder="请输入10000-65535之间的端口号(17521)"
          ></el-input-number>
        </el-form-item>
        <!-- TOKEN 设置 -->
        <el-form-item label="TOKEN 设置" prop="token">
          <el-input
            v-model="formData.token"
            size="small"
            minlength="5"
            maxlength="32"
            placeholder="请输入5-32个字符作为TOKEN"
          ></el-input>
        </el-form-item>
        <!-- 插件版本 设置 -->
        <!-- <el-form-item label="插件版本设置" prop="pluginVersion">
          <el-select
            v-model="formData.pluginVersion"
            filterable
            size="small"
            @change="onChange({prop: pluginVersion, value: $event})"
          >
            <template v-for="option in versions">
              <el-option
                :key="option.version"
                :label="option.version"
                :value="option.version"
              >
                <span>{{ option.version }}</span>
                <span style="float: right;color: #8492a6;"
                  >{{ option.updateTime }}</span
                >
              </el-option>
            </template>
          </el-select>
        </el-form-item> -->
        <!-- 开机启动设置 -->
        <el-row :gutter="12">
          <el-col :span="16">
            <el-form-item label="开机启动" prop="openAtLogin">
              <el-switch v-model="formData.openAtLogin"></el-switch>
              <span>(请注意杀毒软件拦截)</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="自启后最小化" prop="openAsHidden">
              <el-switch v-model="formData.openAsHidden"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 连接中转服务开关 -->
        <el-form-item
          label="连接中转服务(node-hiprint-transit)"
          prop="connectTransit"
        >
          <el-switch
            v-model="formData.connectTransit"
            @change="onChange({prop: 'connectTransit', value: $event})"
          ></el-switch>
        </el-form-item>
        <template v-if="formData.connectTransit">
          <!-- 中转服务 token 设置 -->
          <el-form-item label="服务器地址" prop="transitUrl">
            <el-input
              v-model="formData.transitUrl"
              size="small"
              placeholder="请输入中转服务地址"
            ></el-input>
          </el-form-item>
          <el-row :gutter="12">
            <el-col :span="18">
              <!-- 中转服务 token 设置 -->
              <el-form-item label="TOKEN 设置" prop="transitToken">
                <el-input
                  v-model="formData.transitToken"
                  size="small"
                  placeholder="请输入中转服务 TOKEN"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 测试中转服务 连接 -->
              <el-form-item label="连通性测试">
                <el-button class="transitTest" size="small" @click="handleTest">
                  测试
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <!-- 允许通知 设置 -->
        <el-form-item label="允许通知" prop="allowNotify">
          <el-switch v-model="formData.allowNotify"></el-switch>
        </el-form-item>
        <!-- 关闭窗口 设置 -->
        <el-form-item label="关闭主窗口" prop="closeType">
          <el-radio-group v-model="formData.closeType">
            <el-radio label="tray">最小化到托盘</el-radio>
            <el-radio label="quit">退出程序</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 按钮组 -->
        <el-form-item>
          <el-row :gutter="12">
            <el-col span="12">
              <el-button type="primary" size="small" @click="submit"
                >应用</el-button
              >
            </el-col>
            <el-col span="12">
              <el-button size="small" @click="close">关闭</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <script type="text/javascript">
      const { ipcRenderer } = require("electron");
      const Store = require("electron-store");
      const store = new Store();

      let ipc = ipcRenderer;
      new Vue({
        el: "#app",
        data: () => {
          return {
            // 设置值
            formData: {
              port: 17521,
              token: "",
              pluginVersion: "",
              openAtLogin: false,
              openAsHidden: false,
              connectTransit: false,
              transitUrl: "",
              transitToken: "",
              allowNotify: false,
              closeType: "tray",
            },
            // 预制的版本，解决部分内网无法获取新版本的问题
            versions: [
              {
                version: "0.0.56",
                time: 1700405025750,
                updateTime: "2023/11/19 22:43:45",
              },
              {
                version: "0.0.54-fix",
                time: 1688956459696,
                updateTime: "2023/07/10 10:34:19",
              },
              {
                version: "0.0.54",
                time: 1688525681271,
                updateTime: "2023/07/05 10:54:41",
              },
              {
                version: "0.0.52",
                time: 1683539873782,
                updateTime: "2023/05/08 17:57:53",
              },
              {
                version: "0.0.50",
                time: 1680228434697,
                updateTime: "2023/03/31 10:07:14",
              },
              {
                version: "0.0.48",
                time: 1678354234564,
                updateTime: "2023/03/09 17:30:34",
              },
              {
                version: "0.0.46",
                time: 1677118403361,
                updateTime: "2023/02/23 10:13:23",
              },
            ],
            // 校验规则
            rules: {
              port: [
                {
                  required: true,
                  message: "端口号不能为空",
                  trigger: "blur",
                },
              ],
              token: [
                {
                  min: 5,
                  max: 32,
                  message: "只能输入5-32个字符作为TOKEN",
                  trigger: "blur",
                }
              ],
              transitUrl: [
                {
                  required: true,
                  message: "中转服务器地址不能为空",
                  trigger: "blur",
                },
              ],
              transitToken: [
                {
                  required: true,
                  message: "中转服务 Token 不能为空",
                  trigger: "blur",
                },
              ],
            },
          };
        },
        created() {
          // 获取配置
          ipc.send("getConfig");
          ipc.on("onConfig", this.onConfig);
          this.getVersions();
        },
        methods: {
          /**
           * @description: 表单 change 事件
           * @param {String} prop change 字段名
           * @param {Any} value change 值
           * @return {Void}
           */
          onChange({ prop, value }) {
            switch (prop) {
              case "connectTransit":
                ipc.send("setContentSize", {
                  width: 400,
                  height: value ? 776 : 600,
                });
                break;
              case "pluginVersion":
                // TODO: 下载插件对应 js、css 文件到本地
                break;
            }
          },
          /**
           * @description: 测试连接
           * @return {Void}
           */
          handleTest() {
            ipc.send("testTransit", {
              url: this.formData.transitUrl,
              token: this.formData.transitToken,
            });
          },
          /**
           * @description: 提交设置
           * @return {Void}
           */
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                ipc.send("setConfig", this.formData);
              } else {
                return false;
              }
            })
          },
          /**
           * @description: 关闭窗口
           * @return {Void}
           */
          close() {
            ipc.send("closeSetWindow");
          },
          /**
           * @description: 获取配置
           * @param {IpcRendererEvent} event 事件
           * @param {Any} data 数据
           * @return {Void}
           */
          onConfig(event, data) {
            this.formData = data;
            this.onChange({
              prop: "connectTransit",
              value: data.connectTransit,
            });
          },
          /**
           * @description: 获取在线版本信息
           * @return {Void}
           */
          getVersions() {
            const xhr = new XMLHttpRequest();
            // cnpm 源
            xhr.open(
              "GET",
              "https://registry.npmmirror.com/vue-plugin-hiprint"
            );
            xhr.onload = () => {
              if (xhr.status === 200) {
                this.npmInfo = JSON.parse(xhr.responseText);
                this.versions = _.orderBy(
                  _.map(this.npmInfo.versions, ({ version }) => ({
                    version,
                    time: dayjs(this.npmInfo.time[version]).valueOf(),
                    updateTime: dayjs(this.npmInfo.time[version]).format(
                      "YYYY/MM/DD HH:mm:ss"
                    ),
                  })),
                  "time",
                  "desc"
                );
                this.formData.pluginVersion = this.versions[0].version;
              }
            };
            xhr.send();
          },
        },
      });
    </script>
  </body>
</html>
